
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>社交媒体行为分析仪表盘</title>
    <style>
        /* 基础样式 */
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: #007bff;
            color: white;
            padding: 15px 0;
        }
        .navbar-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .navbar-brand {
            color: white;
            text-decoration: none;
            font-size: 1.5em;
            font-weight: bold;
        }
        .navbar-nav {
            display: flex;
            gap: 20px;
        }
        .nav-link {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            border-radius: 4px;
        }
        .nav-link:hover {
            background-color: rgba(255,255,255,0.1);
        }
        .nav-link.active {
            background-color: rgba(255,255,255,0.2);
        }
        
        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        /* 标题样式 */
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
        }
        
        /* 指标卡片样式 */
        .card-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        .metric-card {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        .metric-card:hover {
            transform: translateY(-5px);
        }
        .card-title {
            margin-top: 0;
            font-size: 1.1em;
            font-weight: normal;
        }
        .card-text {
            margin: 10px 0;
        }
        .display-4 {
            font-size: 2.5em;
            font-weight: bold;
        }
        .text-muted {
            color: #6c757d;
            font-size: 0.9em;
        }
        
        /* 颜色样式 */
        .text-primary { color: #007bff; }
        .text-success { color: #28a745; }
        .text-warning { color: #ffc107; }
        .text-danger { color: #dc3545; }
        .text-info { color: #17a2b8; }
        .bg-primary { background-color: #007bff; }
        .bg-light { background-color: white; }
        .bg-info { background-color: #d1ecf1; }
        .bg-opacity-10 { opacity: 0.9; }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .card-header {
            padding: 15px 20px;
            color: white;
        }
        .card-body {
            padding: 20px;
        }
        
        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        .table th,
        .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #dee2e6;
        }
        .table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        .table-striped tbody tr:nth-of-type(odd) {
            background-color: #f8f9fa;
        }
    </style>
</head>
<body>
    <nav class="navbar">
        <div class="navbar-container">
            <a class="navbar-brand" href="/">社交媒体行为分析</a>
            <div class="navbar-nav">
                <a class="nav-link active" href="/">仪表盘</a>
                <a class="nav-link" href="/about">关于</a>
            </div>
        </div>
    </nav>
    
    <div class="container">
        <h1>社交媒体行为深度分析报告</h1>
        
        <!-- 模型指标卡片 -->
        <div class="card-row">
            <div class="metric-card">
                <h5 class="card-title text-primary">准确率</h5>
                <p class="card-text display-4">{{ '%.1f' | format(accuracy * 100) }}%</p>
                <p class="card-text text-muted">模型预测准确率</p>
            </div>
            <div class="metric-card">
                <h5 class="card-title text-success">精确率</h5>
                <p class="card-text display-4">{{ '%.1f' | format(precision * 100) }}%</p>
                <p class="card-text text-muted">预测正面案例准确率</p>
            </div>
            <div class="metric-card">
                <h5 class="card-title text-warning">召回率</h5>
                <p class="card-text display-4">{{ '%.1f' | format(recall * 100) }}%</p>
                <p class="card-text text-muted">负面影响人群识别率</p>
            </div>
            <div class="metric-card">
                <h5 class="card-title text-danger">F1分数</h5>
                <p class="card-text display-4">{{ '%.2f' | format(f1_score) }}</p>
                <p class="card-text text-muted">综合评价指标</p>
            </div>
        </div>
        
        <!-- 关键影响因素分析 -->
        <div class="card">
            <div class="card-header bg-primary">
                <h3>关键影响因素分析</h3>
            </div>
            <div class="card-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>影响因素</th>
                            <th>相关系数</th>
                            <th>重要性排序</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for i in range(features|length) %}
                        <tr>
                            <td>{{ features[i].feature }}</td>
                            <td>{{ '%.2f' | format(features[i].importance) }}</td>
                            <td>{{ i + 1 }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        
        <!-- 结论总结 -->
        <div class="card bg-info bg-opacity-10">
            <div class="card-body">
                <h4 class="card-title text-info">分析结论</h4>
                <p>1. 每日使用时长是影响人际关系的最重要因素，相关系数达到0.32</p>
                <p>2. 发布内容频率与互动回复及时性也是重要预测指标</p>
                <p>3. 模型在识别可能面临社交困扰的学生方面表现良好，召回率达62%</p>
            </div>
        </div>
    </div>
</body>
</html>
        